<template>
  <a-layout id="components-layout-demo-side" style="min-height: 100vh">
    <ui-header></ui-header>

    <a-layout>
      <a-layout-sider
        v-model:collapsed="collapsed"
        :trigger="null"
        collapsible
        theme="light"
        class="ui-sider-content"
      >
        <div
          class="trigger"
          :style="{
            textAlign: 'center',
            height: '48px',
            lineHeight: '48px',
            fontSize: '18px',
            borderBottom: '1px solid #e8e8e8',
          }"
        >
          <menu-unfold-outlined
            v-if="collapsed"
            class="trigger"
            @click="() => (collapsed = !collapsed)"
          />
          <menu-fold-outlined
            v-else
            class="trigger"
            @click="() => (collapsed = !collapsed)"
          />
        </div>
        <a-menu
          theme="light"
          v-model:selectedKeys="selectedKeys"
          mode="inline"
          :defaultSelectedKeys="[$route.path]"
          :defaultOpenKeys="[$route.meta.subKey]"
          @click="handleOnClick2RouteSkip"
        >
          <a-menu-item key="1">
            <pie-chart-outlined />
            <span>Option 1</span>
          </a-menu-item>
          <a-menu-item key="2">
            <desktop-outlined />
            <span>Option 2</span>
          </a-menu-item>
          <a-sub-menu key="sub1">
            <template v-slot:title>
              <span><user-outlined /><span>User</span></span>
            </template>
            <a-menu-item key="/dashboard">Tom</a-menu-item>
            <a-menu-item key="4">Bill</a-menu-item>
            <a-menu-item key="5">Alex</a-menu-item>
            <a-menu-item key="14">Bill</a-menu-item>
            <a-menu-item key="15">Alex</a-menu-item>
            <a-menu-item key="24">Bill</a-menu-item>
            <a-menu-item key="25">Alex</a-menu-item>
            <a-menu-item key="34">Bill</a-menu-item>
            <a-menu-item key="45">Alex</a-menu-item>
            <a-menu-item key="55">Alex</a-menu-item>
            <a-menu-item key="54">Bill</a-menu-item>
            <a-menu-item key="57">Alex</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <template v-slot:title>
              <span><team-outlined /><span>Team</span></span>
            </template>
            <a-menu-item key="6">Team 1</a-menu-item>
            <a-menu-item key="8">Team 2</a-menu-item>
          </a-sub-menu>
          <a-menu-item key="9">
            <file-outlined />
            <span>File</span>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout class="ui-layout-content">
        <a-layout-content class="mr-20">
          <router-view />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>

<script>
import {
  Layout,
  Menu
} from "ant-design-vue";

import {
  PieChartOutlined,
  DesktopOutlined,
  UserOutlined,
  TeamOutlined,
  FileOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from "@ant-design/icons-vue";

import UIHeader from './components/basic/UIHeader'

export default {
  name: "App",
  components: {
    UiHeader: UIHeader,
    // 布局
    ALayout: Layout,
    ALayoutSider: Layout.Sider,
    ALayoutContent: Layout.Content,

    // ALayoutFooter: Layout.Footer,

    // 菜单
    AMenu: Menu,
    AMenuItem: Menu.Item,
    ASubMenu: Menu.SubMenu,
    PieChartOutlined,
    DesktopOutlined,
    UserOutlined,
    TeamOutlined,
    FileOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
  },
  data() {
    return {
      collapsed: false,
    };
  },
  methods: {
    handleOnClick2RouteSkip(item) {
      console.info(item);
      console.info("菜单项跳转");
    },
    handleOnClick2Menu(item) {
      console.info(item);
      console.info("header头像处");
    },
  },
};
</script>

<style lang="less" scoped>
@import "~assets/theme/basic/basic.less";

.ui-layout-content {
  max-height: calc(100vh - @header-height);
}
.ui-sider-content{
  max-height: calc(100vh - @header-height);
  overflow-y: auto;
}
</style>